<template>
  <div class="flex flex-col justify-center items-center w-full">
    <div class="flex flex-col  justify-end items-center w-full max-w-screen-md ">
      <!--  添加评论  -->
      <div v-if="useAuthStore().isAuthenticated" class="flex justify-center items-start w-full mt-4">
        <div class="flex justify-center items-center w-1/6">
          <img v-if="hook_getUser()?.['avatar'] != null" class="w-12 h-12 object-cover avatar rounded-full" :srcset="hook_getUser()?.['avatar']" alt="">
          <div v-else class="w-12 h-12 object-cover avatar rounded-full border text-xl flex justify-center items-center">{{ hook_getUser()?.['username'].charAt(0).toUpperCase() }}</div>
        </div>
        <textarea v-model="comments.content" class="textarea textarea-bordered w-4/6 h-12 min-h-12 max-h-52 text-xs" placeholder="只是一直在这等你而已，才不是想被评论呢~"></textarea>
        <div @click="addComments()" class="flex justify-center items-center w-1/6 h-12  btn bg-primary/20 object-cover mx-2">
          发送
        </div>
      </div>
      <!--  评论区  -->
      <div class="flex flex-col justify-center items-start w-full gap-2 mt-4 border-y">
        <comment v-for="(comments,index) in commentsData"
                 :key="index"
                 @deleteComments="getCommentsData()"
                 :comments="comments">
        </comment>
      </div>
    </div>
    <div class="divider my-12">到底了😕</div>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import Comment from "./comment.vue";
import {
  Comments,
  Comments_addComments,
  Comments_findCommentListFromCommentsBySongId,
  Type
} from "../hook/CommentsHook.ts";
import {hook_getUser} from "../hook/UserHook.ts";
import {useAuthStore} from "../plugins/pinia.ts";

let props = defineProps<{
  songId
}>()

let showReply = ref(false)

onMounted(async () => {
  await getCommentsData()
})

let commentsData = ref<Array<any>>()

async function getCommentsData() {
  let promise = await Comments_findCommentListFromCommentsBySongId(props.songId);
  console.log(promise)
  commentsData.value = <Array<any>> promise
}

let comments = ref<Comments>(new Comments());
async function addComments() {
  comments.value.type = Type.Comment
  comments.value.userId = hook_getUser()?.['id']
  comments.value.songId = props.songId

  console.log(comments.value)

  await Comments_addComments(comments.value)
  comments.value = new Comments();
  await getCommentsData()
}

//TODO Watch
watch(()=> props.songId,async (value) => {
  await getCommentsData()
})


</script>

<style scoped>

</style>